<!-- 自由面板 -->
<template>
    <widget-view-free-vessel
        ref="widgetDomRef"
        v-model="widgetList"
        :widget-data="element"
        :disabled="draggableDisabled"
        :custom-class="['free-vessel']"
        :custom-style="boxStyle"
        :preview="preview"
        placeholder="拖拽组件到自由面板"
        disabled-placeholder="不可放置"
    >
        <!-- v-if="!preview && isOneLevelWidget" -->
        <widget-view-resizable
            v-if="!preview"
            :element="element"
            :width="widgetWidth"
            :height="widgetHeight"
            :max-width="parentWidth"
            :resizable="{
                left: false,
                top: false,
                width: true,
                height: true
            }"
            @move="onResizableMove"
            @end="onResizableEnd"
        />
    </widget-view-free-vessel>
</template>

<script>
import { defineComponent, toRefs, ref, computed } from 'vue'
import useWidget from '@/libs/edit/widgetData'
import useWidgetDraggable from '@/libs/edit/widgetDraggable'
import whiteList from './white-list'
import WidgetViewFreeVessel from '../../widget-view-free-vessel'
import WidgetViewResizable from '../../widget-view-resizable'
export default defineComponent({
    name: 'WidgetFreeVessel',
    components: {
        WidgetViewFreeVessel,
        WidgetViewResizable
    },
    props: {
        element: {
            type: Object,
            default: () => ({})
        },
        // 预览模式
        preview: {
            type: Boolean,
            default: false
        }
    },
    setup(props, data) {
        const { element, preview } = toRefs(props)

        const {
            widgetListFlat
        } = useWidget()

        const {
            draggableWidgetType
        } = useWidgetDraggable()

        const widgetDomRef = ref(null)

        const widgetList = computed(() => element.value?.eles?.content || [])

        const draggableDisabled = computed(() => {
            return !!draggableWidgetType.value && !whiteList.includes(draggableWidgetType.value)
        })

        const boxStyle = computed(() => {
            const style = element.value.eles.style || {}
            return {
                width: style.width,
                height: style.height,
                opacity: style.opacity,
                marginTop: style['margin-top'],
                marginLeft: style['margin-left'],
                marginRight: style['margin-right'],
                backgroundColor: style['background-color'],
                backgroundImage: style['background-image'],
                borderStyle: style['border-style'],
                borderColor: style['border-color'],
                borderWidth: style['border-width'],
                borderRadius: style['border-radius'],
                boxShadow: style['box-shadow']
            }
        })

        const widgetWidth = computed({
            get: () => parseInt(element.value.eles.style.width),
            set: val => element.value.eles.style.width = val + 'px'
        })
        const widgetHeight = computed({
            get: () => parseInt(element.value.eles.style.height),
            set: val => element.value.eles.style.height = val + 'px'
        })

        // 是否是一级控件
        const isOneLevelWidget = computed(() => {
            const { widgetData, parentId } = widgetListFlat.value?.[element.value.eles.id] || {}
            return !!widgetData && !parentId
        })
        const parentWidth = computed(() => {
            return isOneLevelWidget.value ? 320 : Infinity
        })

        // 拖动调整控件大小时触发
        const onResizableMove = data => {
            const { width, height } = data
            widgetDomRef.value.widgetDomRef.style.cssText += `width:${width}px;height:${height}px;`
        }
        // 结束调整控件大小时触发
        const onResizableEnd = data => {
            const { width, height } = data
            widgetWidth.value = width
            widgetHeight.value = height
        }

        return {
            element,
            preview,

            draggableWidgetType,
            draggableDisabled,

            widgetDomRef,
            widgetList,
            boxStyle,
            widgetWidth,
            widgetHeight,
            
            isOneLevelWidget,
            parentWidth,

            onResizableMove,
            onResizableEnd
        }
    }
})
</script>

<style lang="less" scoped>
@import './widget-free-vessel.less';
</style>